<template>
  <div>
    <div class="paroduct-containr flex">
      <div class="goods-image">
        <!-- 左侧大图-->
        <div class="middle" ref="target">
          <!-- 大图展示 -->
          <img :src="imageList[activeIndex]" alt="" />
          <!-- 大图中的蒙层小滑块 -->
          <div class="layer" v-show="!isOutside" :style="{ left: `${left}px`, top: `${top}px` }"></div>
        </div>
        <!-- 小图列表 -->
        <div class="small">
          <!-- 可以使用 @mouseenter 事件监听器来监听鼠标移入（hover）元素的事件。 -->
          <div v-for="(img, i) in imageList" :key="i" @mouseenter="enterhandler(i)" :class="{ active: activeIndex === i }">
            <img :src="img" alt="" />
          </div>
        </div>
        <!-- 放大镜大图 -->
        <div
          class="large"
          v-show="!isOutside"
          :style="[
            {
              backgroundImage: `url(${imageList[activeIndex]})`,
              backgroundPositionX: `${positionX}px`,
              backgroundPositionY: `${positionY}px`,
            },
          ]"></div>
      </div>
      <div class="ml-9 flex flex-col justify-between h-96 mt-2">
        <div>
          <h1 class="text-2xl font-bold pb-3 mb-4 border-b-2 border-gray-200">液压机、伺服压机、气动压机使用昆仑通态触摸屏TPC1051Ki</h1>
          <div class="bg-gray-100 p-4">
            <h3 class="text-lg font-bold mb-2 text-primary">应用范围：</h3>
            <h4 class="text-sm">液压机、伺服压机、气动压机使用昆仑通态触摸屏TPC1051Ki</h4>
          </div>
        </div>
        <div class="mt-4">
          <el-button type="primary" size="large" class="w-48">规格书下载</el-button>
          <el-button type="primary" size="large" class="w-48">应用案例</el-button>
        </div>
      </div>
    </div>
    <div class="segmented-box">
      <el-segmented v-model="value" :options="options" block>
        <template v-slot="data">
          <div class="py-3 text-base">
            {{ data.item.label }}
          </div>
        </template>
      </el-segmented>
    </div>
  </div>
</template>
<script setup>
import { useMouseInElement } from "@vueuse/core";

// 图片列表和放大镜
const imageList = [
  "https://yanxuan-item.nosdn.127.net/cac68a7880bec1c72dcfce112d10e955.png",
  "https://yanxuan-item.nosdn.127.net/06a158d2888b20383a466227e39bbbc7.jpg",
  "https://yanxuan.nosdn.127.net/8f8092d5bf6a133a8cb59ab7b9f790e9.png",
  "https://yanxuan-item.nosdn.127.net/eac6c40fdb0f977fdf80048d7b181ffa.png",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg",
];
// 1.小图切换大图显示
const activeIndex = ref(0);
const enterhandler = (i) => {
  activeIndex.value = i;
};
// 2. 获取鼠标相对位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);
// 3. 控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化 重新设置left/top）
// 滑块俩坐标
const left = ref(0);
const top = ref(0);
// 大图俩坐标
const positionX = ref(0);
const positionY = ref(0);
// 回调函数会一直执行,可以优化不执行
watch([elementX, elementY, isOutside], () => {
  // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑
  if (isOutside.value) return;
  // 有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX.value - 100;
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementY.value - 100;
  }
  // 处理边界
  if (elementX.value > 300) {
    left.value = 200;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 300) {
    top.value = 200;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }
  // 控制大图的显示
  positionX.value = -left.value * 2;
  positionY.value = -top.value * 2;
});

const value = ref(0);
const options = [
  {
    label: "产品概述",
    value: 0,
  },
  {
    label: "产品参数",
    value: 1,
  },
  {
    label: "视频展示",
    value: 2,
  },
  {
    label: "可选配件",
    value: 3,
  },
];
</script>

<style scoped lang="scss">
.goods-image {
  //   width: 600px;
  //   height: 400px;
  position: relative;
  //   display: flex;
  //   margin: 200px 600px;
  // 左侧大图
  .middle {
    width: 400px;
    height: 400px;
    img {
      width: 400px;
      height: 400px;
    }
    // 大图中的蒙层小滑块
    .layer {
      width: 200px;
      height: 200px;
      background: rgba(0, 0, 0, 0.2);
      // 绝对定位 然后跟随鼠标控制left和top属性就可以让滑块移动起来
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  // 列表小图夫容器
  .small {
    width: 400px;
    height: 100px;
    display: flex;
    // flex-direction: column; /* 设置主轴为垂直方向 */
    justify-content: space-around; /* 在主轴上均匀分布 */
    align-items: center; /* 在交叉轴上居中 */
    margin-top: 12px;
    div {
      width: 68px;
      height: 68px;
      cursor: pointer; // 鼠标悬停时显示为手型指示符的样式
      &:hover,
      &.active {
        border: 2px solid greenyellow;
      }
      // 列表小图
      img {
        width: 68px;
        height: 68px;
      }
    }
  }
  // 放大镜大图
  .large {
    position: absolute;
    top: 0;
    left: 410px;
    width: 450px;
    height: 450px;
    z-index: 999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
}
.segmented-box {
  margin-top: 20px;
  .el-segmented__item-label {
    padding: 12px 0;
  }
}
</style>
